@charset "UTF-8";

$width: 750;
@function vw($px) {
  @return ($px / $width) * 100vw;
}

input, button, select, textarea, p, div {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
}

img, input, button {
  border: none;
}

li {
  list-style: none;
}

img {
  vertical-align: top;
  height: auto;
}

body a {
  outline-width: 0;
  -webkit-tap-highlight-color: transparent;
}

.clearfix {
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  display: inline-block;
  display: block;
}

* {
  padding: 0;
  margin: 0;
}

html {
  -webkit-text-size-adjust: none;
  font-size: 62.5%;
  background-color: #fff;
}

body, html {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: none;
  overflow: hidden;
  font-size: 1.2rem;
  font-family: "microsoft yahei";
  color: #000000;
}

body.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.w100 {
  width: 100%;
}

.h100 {
  height: 100%;
}

.abso {
  position: absolute;
}

.z1 {
  z-index: 1;
}

.z2 {
  z-index: 2;
}

.z3 {
  z-index: 3;
}

.z4 {
  z-index: 4;
}

.z5 {
  z-index: 5;
}

.z6 {
  z-index: 6;
}

.z11 {
  z-index: 11;
}

.z12 {
  z-index: 12;
}

.z13 {
  z-index: 13;
}

.z14 {
  z-index: 14;
}

.preload {
  left: 0;
  top: 0;
  z-index: 111;
  background-color: #000;
  overflow: hidden;

  .percent {
    font-size: 0.8rem;
    text-align: center;
    bottom: 11%;
    left: 0;
    color: #fff;
    font-family: "PingFang SC";
  }

  .start-btn {
    width: 9.6rem;
    height: 1.875rem;
    left: 50%;
    margin-left: -4.8rem;
    bottom: 11%;
    text-align: center;
    color: #FFF;
  }
}

.screen1 {
  opacity: 0;
  top: 0;
  left: 0;
  z-index: 112;
  background-color: #000204;
  overflow: hidden;

  .eye{
    opacity: 0;

    &.blink{
      opacity: 1;
      animation-name: blink;
      animation-timing-function: ease;
      animation-iteration-count: 2;
      animation-duration: .3s;
      animation-fill-mode: both;
    }
  }

  .word1{
    opacity: 0;
    text-align: center;
    background: url(../assets/icon_screen/bg-01.jpg) no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;

    &.show{
      animation-delay: .8s;
      animation-duration: .6s;
    }

    .fonts {
      width: vw(514);
      opacity: 0;
      position: absolute;
      top: vw(466);
      left: vw(126);

      &.show{
        animation-delay: .2s;
        animation-duration: 1.4s;
      }
    }

    .animal {
      display: block;
      width: vw(93);
      position: absolute;
      left: vw(-10);
      top: vw(446);

      &.chan{
        animation-name: chan;
      }
      &.show{
        animation-delay: 1s;
        animation-duration: .6s;
      }
    }
  }

  .word2{
    opacity: 0;
    text-align: center;
    background: url(../assets/icon_screen/bg-01.jpg) no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;

    &.show{
      animation-delay: .6s;
      animation-duration: .6s;
    }

    .fan{
      width: vw(304);
      top: 0;
      left: vw(223);
    }

    .fonts{
      opacity: 0;
      width: vw(600);
      top: vw(496);
      left: vw(75);
      z-index: 1;

      &.show{
        animation-delay: .4s;
        animation-duration: 2s;
      }
    }
  }

  .word3{
    opacity: 0;
    text-align: center;
    background: url(../assets/icon_screen/bg-02.jpg) no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;

    &.show{
      animation-delay: .6s;
      animation-duration: .6s;
    }

    .fonts{
      opacity: 0;
      width: vw(579);
      top: vw(370);
      left: vw(86);

      &.show{
        animation-delay: .4s;
        animation-duration: 2.4s;
      }
    }

    .ball{
      opacity: 0;
      width: vw(143);
      left: vw(-70);
      bottom: vw(206);

      &.show{
        animation-delay: 0s;
        animation-duration: .3s;
      }

      &.jump{
        animation-name: jump;
        animation-timing-function: ease;
        animation-delay: 1.2s;
        animation-duration: .8s;
      }
    }
  }

  .skip {
    display: block;
    width: vw(109);
    height: vw(19);
    bottom: vw(68);
    right: vw(75);
    z-index: 20;
    padding: 4vw;
    background: url(../assets/icon_screen/skip.png) 100% 100% no-repeat;
    background-size: 100% auto;

    &.show{
      animation-delay: 2s;
      animation-duration: .3s;
      
    }
  }
}

.screen2{
  display: none;
  background: url(../assets/icon_screen/bg-03.jpg) no-repeat;
  background-size: 100% auto;
  z-index: 11;

  button{
    opacity: 0;
    width: vw(95);
    height: vw(95);
    left: vw(327);
    top: vw(867);
    background: url(../assets/icon_screen/start.png) no-repeat;
    background-size: 100% auto;
  }
}

#ourCanvas {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
}

#drawWarp {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 9;
  overflow: hidden;

  .roombg {
    height: vw(1100);
    left: 0;
    top: 0;
    z-index: 1;
    background: url(../assets/Room.jpg) no-repeat;
    background-size: 100% auto;

    img {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      bottom: 0;
    }
  }

  .shareBanner{
    display: none;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
    text-align: center;
    
    &.show{
      display: block;
    }

    span{
      display: block;
      width: vw(334);
      position: absolute;
      top: vw(30);
      left: vw(208);
      font-size: 4vw;
      font-weight: 600;
      letter-spacing: 1px;
      color: #000204;
      font-family: "PingFang SC";
      overflow: hidden;

      i{
        margin: 0 10px;
        font-style: normal;
      }
    }
    .qrcode{
      display: block;
      width: vw(109);
      height: vw(109);
      position: absolute;
      top: vw(36);
      right: vw(34);
    }
    .bannerBg {
      width: 100%;
      margin: vw(36) 0 vw(23) 0;
    }
  }

  .img_box {
    opacity: 0;
    width: auto;
    height: auto;
    position: absolute;
    left: 50%;
    top: 45%;
    padding: 0.8rem;
    border: 1px solid transparent;

    img {
      display: block;
      width: 100%;
      height: auto;
    }

    .remove-btn {
      display: none;
      position: absolute;
      width: 1.5rem;
      height: 1.5rem;
      left: -1.2rem;
      top: -1.2rem;
      background: url(../assets/icon_ui/remove.e80f2.png) no-repeat center (center / 100%) 100%;
    }

    .icon_scale {
      display: none;
      position: absolute;
      width: 1.5rem;
      height: 1.5rem;
      right: -0.75rem;
      bottom: -0.75rem;
      background: url(../assets/icon_ui/resize.65162.png) no-repeat center (center / 100%) 100%;
    }
  }

  .border-outer {
    border: 1px solid #fff;
    z-index: 444 !important;

    .remove-btn, .icon_scale {
      display: block;
    }
  }
}

#lastPage{
  display: none;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;

  &.show{
    display: block;
    -webkit-animation: fadeIn 0.8s ease both;
  }
  img{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
  }
  .back-btn{
    width: vw(78);
    height: vw(96);
    position: absolute;
    right: vw(55);
    top: vw(76);
    z-index: 2;
    background: url(../assets/icon_ui/back-btn.png) no-repeat;
    background-size: 100% auto;
  }
}

.foot-wrap {
  height: vw(452);
  background-color: #e0d7bf;
  lefT: 0;
  bottom: 0;
  z-index: 10;

  .tabs-wrap {
    height: vw(123);
    background-color: #eae1d4;
    position: relative;

    .type {
      position: relative;
      float: left;
      width: 20vw;
      height: 100%;
      background-position: 50% 50%;
      background-repeat: no-repeat;
    }

    .type-1 {
      background-image: url(../assets/icon_ui/type1.png);
      background-size: vw(75) auto;
    }

    .type-2 {
      background-image: url(../assets/icon_ui/type2.png);
      background-size: vw(90) auto;
    }

    .type-3 {
      background-image: url(../assets/icon_ui/type3.png);
      background-size: vw(59) auto;
    }

    .type-4 {
      background-image: url(../assets/icon_ui/type4.png);
      background-size: vw(71) auto;
    }

    .type-5 {
      background-image: url(../assets/icon_ui/type5.png);
      background-size: vw(94) auto;
    }

    .curr {
      background-color: #e0d7bf;
    }

    .type-1.curr {
      background-image: url(../assets/icon_ui/type1-cur.png);
    }

    .type-2.curr {
      background-image: url(../assets/icon_ui/type2-cur.png);
    }

    .type-3.curr {
      background-image: url(../assets/icon_ui/type3-cur.png);
    }

    .type-4.curr {
      background-image: url(../assets/icon_ui/type4-cur.png);
    }

    .type-5.curr {
      background-image: url(../assets/icon_ui/type5-cur.png);
    }
  }
}

#wrap {

  .wrap-cap {
    display: none;
    width: vw(87);
    bottom: vw(17+452);
    right: vw(28);
    z-index: 445;

    &.slide-down {
      transform: translateY(38.8vw);
    }

    .finish-btn {
      width: vw(87);
      height: vw(87);
      border-radius: 50%;
      margin-bottom: vw(9);
      background: #fff url(../assets/icon_ui/icon_camera.jpg) 50% 50% no-repeat;
      background-size: vw(50) auto;
    }

    .close-tabs {
      width: vw(87);
      height: vw(87);
      border-radius: 50%;
      background: #fff url(../assets/icon_ui/unfold.jpg) 50% 50% no-repeat;
      background-size: vw(44) auto;
      -webkit-transform: rotate(0deg);
      -webkit-transform-origin: center center;
      -webkit-transition: all 0.4s ease;

      &.down {
        -webkit-transform: rotate(180deg);
      }
    }
  }
}

.foot-wrap .select-wrap {
  height: vw(329);
  position: relative;
  box-sizing: border-box;
  padding: 0.5rem 1.125rem 0;
  overflow: hidden;

  .scroll-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9;
    left: 0;
    top: 0;

    .scroller {
      z-index: 1;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
      width: 100%;
      padding-bottom: 3vw;

      .switch-btn {
        width: 90vw;
        margin: 0 5vw;
        text-align: center;
        padding-top: vw(40);

        button {
          width: vw(99);
          height: vw(90);
          border-radius: 5px;
          background-color: transparent;
          background-position: 50% 50%;
          background-repeat: no-repeat;
        }

        .cur {
          background-color: #ece7d8;
        }
      }

      ul {
        padding-top: vw(75);
      }

      .wrap-list ul {
        display: none;
        padding-top: 0;

        &:first-child {
          display: block;
        }
      }

      li {
        width: 33.3%;
        height: vw(246);
        position: relative;
        float: left;
        text-align: center;
        line-height: vw(246);

        img{
          vertical-align: middle;
        }
      }
    }
  }

  .curr {
    display: block;
  }
}

/*  分类1  */

#wrapper1 {
  .switch-btn button {
    margin: 0 7.2vw;

    &:first-child {
      background-image: url(../assets/icon_ui/type_girl.png);
      background-size: vw(41) auto;
    }

    &:nth-child(2) {
      background-image: url(../assets/icon_ui/type_boy.png);
      background-size: vw(41) auto;
    }

    &:nth-child(3) {
      background-image: url(../assets/icon_ui/type_face.png);
      background-size: vw(59) auto;
    }
  }

  ul {
    &:first-child li {

      &:first-child img{
        width: vw(98);
      }

      &:nth-child(2) img{
        width: vw(120);
      }

      &:nth-child(3) img{
        width: vw(107);
      }

      &:nth-child(4) img{
        width: vw(125);
      }

      &:nth-child(5) img{
        width: vw(98);
      }

      &:nth-child(6) img{
        width: vw(106);
      }

      &:nth-child(7) img{
        width: vw(102);
      }
    }

    &:nth-child(2) li {
      &:first-child img{
        width: vw(99);
      }

      &:nth-child(2) img{
        width: vw(93);
      }

      &:nth-child(3) img{
        width: vw(100);
      }

      &:nth-child(4) img{
        width: vw(100);
      }

      &:nth-child(5) img{
        width: vw(99);
      }

      &:nth-child(6) img{
        width: vw(97);
      }
    }

    &:nth-child(3) li {
      &:first-child img {
        width: vw(75);
      }

      &:nth-child(2) img{
        width: vw(84);
      }

      &:nth-child(3) img{
        width: vw(85);
      }

      &:nth-child(4) img{
        width: vw(71);
      }

      &:nth-child(5) img{
        width: vw(90);
      }

      &:nth-child(6) img{
        width: vw(85);
      }

      &:nth-child(7) img{
        width: vw(89);
      }

      &:nth-child(8) img{
        width: vw(90);
      }

      &:nth-child(9) img{
        width: vw(85);
      }
    }
  }
}

/*  分类2  */

#wrapper2 {
  .switch-btn button {
    margin: 0 vw(52);

    &:first-child {
      background-image: url(../assets/icon_ui/type_summer.png);
      background-size: vw(68) auto;
    }

    &:last-child {
      background-image: url(../assets/icon_ui/type_winter.png);
      background-size: vw(58) auto;
    }
  }

  ul {
    &:first-child li {
      &:first-child img{
        width: vw(84);
      }

      &:nth-child(2) img{
        width: vw(112);
      }

      &:nth-child(3) img{
        width: vw(98);
      }

      &:nth-child(4) img{
        width: vw(77);
      }

      &:nth-child(5) img{
        width: vw(118);
      }

      &:nth-child(6) img{
        width: vw(121);
      }

      &:nth-child(7) img{
        width: vw(111);
      }

      &:nth-child(8) img{
        width: vw(133);
      }

      &:nth-child(9) img{
        width: vw(98);
      }

      &:nth-child(10) img{
        width: vw(168);
      }

      &:nth-child(11) img{
        width: vw(116);
      }
    }

    &:nth-child(2) li {
      &:first-child img{
        width: vw(93);
      }

      &:nth-child(2) img{
        width: vw(126);
      }

      &:nth-child(3) img{
        width: vw(110);
      }

      &:nth-child(4) img{
        width: vw(121);
      }

      &:nth-child(5) img{
        width: vw(133);
      }

      &:nth-child(6) img{
        width: vw(88);
      }

      &:nth-child(7) img{
        width: vw(138);
      }

      &:nth-child(8) img{
        width: vw(138);
      }

      &:nth-child(9) img{
        width: vw(158);
      }

      &:nth-child(10) img{
        width: vw(101);
      }

      &:nth-child(11) img{
        width: vw(153);
      }

      &:nth-child(12) img{
        width: vw(138);
      }

      &:nth-child(13) img{
        width: vw(113);
      }
    }
  }
}

/*  分类3  */

#wrapper3 li {
  &:first-child img{
    width: vw(93);
  }

  &:nth-child(2) img{
    width: vw(92);
  }

  &:nth-child(3) img{
    width: vw(222);
  }

  &:nth-child(4) img{
    width: vw(133);
  }

  &:nth-child(5) img{
    width: vw(189);
  }

  &:nth-child(6) img{
    width: vw(103);
  }

  &:nth-child(7) img{
    width: vw(80);
  }

  &:nth-child(8) img{
    width: vw(119);
  }

  &:nth-child(9) img{
    width: vw(94);
  }

  &:nth-child(10) img{
    width: vw(135);
  }

  &:nth-child(11) img{
    width: vw(140);
  }

  &:nth-child(12) img{
    width: vw(131);
  }

  &:nth-child(13) img{
    width: vw(131);
  }

  &:nth-child(14) img{
    width: vw(131);
  }

  &:nth-child(15) img{
    width: vw(123);
  }

  &:nth-child(16) img{
    width: vw(128);
  }

  &:nth-child(17) img{
    width: vw(97);
  }

  &:nth-child(18) img{
    width: vw(117);
  }

  &:nth-child(19) img{
    width: vw(31);
  }

  &:nth-child(20) img{
    width: vw(37);
  }

  &:nth-child(21) img{
    width: vw(34);
  }

  &:nth-child(22) img{
    width: vw(35);
  }

  &:nth-child(23) img{
    width: vw(231);
  }

  &:nth-child(24) img{
    width: vw(42);
  }

  &:nth-child(25) img{
    width: vw(140);
  }

  &:nth-child(26) img{
    width: vw(105);
  }

  &:nth-child(27) img{
    width: vw(161);
  }

  &:nth-child(28) img{
    width: vw(73);
  }

  &:nth-child(29) img{
    width: vw(73);
  }

  &:nth-child(30) img{
    width: vw(73);
  }

  &:nth-child(31) img{
    width: vw(86);
  }

  &:nth-child(32) img{
    width: vw(124);
  }

  &:nth-child(33) img{
    width: vw(15);
  }

  &:nth-child(34) img{
    width: vw(15);
  }

  &:nth-child(35) img{
    width: vw(15);
  }

  &:nth-child(36) img{
    width: vw(15);
  }

  &:nth-child(37) img{
    width: vw(15);
  }

  &:nth-child(38) img{
    width: vw(103);
  }

  &:nth-child(39) img{
    width: vw(69);
  }

  &:nth-child(40) img{
    width: vw(66);
  }

  &:nth-child(41) img{
    width: vw(122);
  }

  &:nth-child(42) img{
    width: vw(32);
  }

  &:nth-child(43) img{
    width: vw(162);
  }

  &:nth-child(44) img{
    width: vw(63);
  }

  &:nth-child(45) img{
    width: vw(170);
  }

  &:nth-child(46) img{
    width: vw(161);
  }

  &:nth-child(47) img{
    width: vw(117);
  }

  &:nth-child(48) img{
    width: vw(156);
  }

  &:nth-child(49) img{
    width: vw(76);
  }

  &:nth-child(50) img{
    width: vw(123);
  }

  &:nth-child(51) img{
    width: vw(87);
  }

  &:nth-child(52) img{
    width: vw(198);
  }
}

/*  分类4  */

#wrapper4 li {
  &:first-child img{
    width: vw(80);
  }

  &:nth-child(2) img{
    width: vw(84);
  }

  &:nth-child(3) img{
    width: vw(80);
  }

  &:nth-child(4) img{
    width: vw(104);
  }

  &:nth-child(5) img{
    width: vw(110);
  }

  &:nth-child(6) img{
    width: vw(82);
  }

  &:nth-child(7) img{
    width: vw(95);
  }

  &:nth-child(8) img{
    width: vw(159);
  }

  &:nth-child(9) img{
    width: vw(175);
  }

  &:nth-child(10) img{
    width: vw(85);
  }

  &:nth-child(11) img{
    width: vw(86);
  }

  &:nth-child(12) img{
    width: vw(84);
  }

  &:nth-child(13) img{
    width: vw(73);
  }

  &:nth-child(14) img{
    width: vw(112);
  }

  &:nth-child(15) img{
    width: vw(138);
  }

  &:nth-child(16) img{
    width: vw(71);
  }

  &:nth-child(17) img{
    width: vw(72);
  }
}

/*  分类5  */

#wrapper5 li {
  &:first-child img{
    width: vw(112);
  }

  &:nth-child(2) img{
    width: vw(82);
  }

  &:nth-child(3) img{
    width: vw(29);
  }

  &:nth-child(4) img{
    width: vw(43);
  }

  &:nth-child(5) img{
    width: vw(41);
  }
}

.end-page {
  display: none;
  left: 0;
  top: 0;
  z-index: 1111;
  overflow: hidden;

  .btn-block {
    width: vw(460);
    height: vw(48);
    position: absolute;
    top: vw(988);
    left: vw(145);
    z-index: 12;

    button{

      height: vw(48);

      &.save-btn{
        float: left;
        width: vw(273);
        background: url(../assets/icon_ui/long-press-btn.png) no-repeat;
        background-size: 100% auto;
      }

      &.go-next{
        float: right;
        width: vw(143);
        background: url(../assets/icon_ui/next.png) no-repeat;
        background-size: 100% auto;
      }
    }
  }

  #finalDesk {
    width: 100%;
    height: auto;
    z-index: 11;
  }
}

@keyframes clickAni {
  to {
    -webkit-transform: scale(0.95);
  }
}

.clickAni {
  -webkit-animation: clickAni 0.4s ease-in-out infinite alternate;
}

@keyframes handAni {
  to {
    -webkit-transform: translate(0, 5px);
  }
}

@media (max-width: 360px) and (min-width: 321px) and (max-height: 560px) {
  .preload {
    .percent, .start-btn {
      bottom: 8%;
    }
  }
}

@media only screen and (width: 375px) and (min-height: 750px) {
  .preload {
    background-position: center 2rem;

    .percent, .start-btn {
      bottom: 20%;
    }
  }

  #drawWarp {
    .roombg {
      top: 0;
    }
    .shareBanner {
      padding-bottom: 44px;
    }
  }

  .foot-wrap .icon_logo {
    top: -3.6rem;
  }
}

@-webkit-keyframes blink{

  0%{
    transform: scale(1, 1);
  };
 
  50%{
    transform: scale(1, 2.4);
  }

  100%{
    transform: scale(1, 1);
  }
}

@keyframes chan{
  from{
    left: vw(-10);
    top: vw(446);
    transform: rotate(0);
  }
  10%{
    left: vw(125);
    top: vw(425);
    transform: rotate(7.5deg);
  }
  30% {
    left: vw(250);
    top: vw(344);
    transform: rotate(15deg);
  }
  50% {
    left: vw(375);
    top: vw(294);
    transform: rotate(23.5deg);
  }
  70% {
    left: vw(500);
    top: vw(253);
    transform: rotate(31deg);
  }
  90% {
    left: vw(625);
    top: vw(228);
    transform: rotate(38.5deg);
  }
  to{
    left: 90vw;
    top: 23vw;
    transform: rotate(45deg);
  }
}

@keyframes jump{
  from{
    opacity: 1;
    bottom: vw(206);
    left: vw(-70);
    transform: rotate(0);
  }
  10% {
    opacity: 1;
    bottom: vw(527);
    left: vw(85);
    transform: rotate(60deg);
  }
  30% {
    opacity: 1;
    bottom: vw(129);
    left: vw(234);
    transform: rotate(10deg);
  }
  50% {
    opacity: 1;
    bottom: vw(426);
    left: vw(400);
    transform: rotate(-30deg);
  }
  70% {
    opacity: 1;
    bottom: vw(147);
    left: vw(520);
    transform: rotate(15deg);
  }
  90% {
    opacity: 1;
    bottom: vw(242);
    left: vw(605);
    transform: rotate(-15deg);
  }
  to{
    opacity: 0;
    bottom: vw(189);
    left: vw(682);
    transform: rotate(30deg);
  }
}